<template>
    <div class="info-container">
        <div class="head-section">
            <img class="head-img" :src="icon"/>
        </div>
        <div class="info-section default-info-section">
            <!-- 昵称 -->
            <div class="cell shadow">
                <div class="left">
                    <span class='iconfont icon-nicheng'></span>
                    <span class="cell-name">昵称</span>
                </div>
                <div class="right">
                    <span class="wx-value">{{username}}</span>
                </div>
            </div>
            <!-- 性别 -->
            <div class="cell">
                <div class="left">
                    <span class='iconfont icon-sex'></span>
                    <span class="cell-name">性别</span>
                </div>
                <div class="right" @click="openSexPicker">
                    <span class="wx-value">{{sexValue}}</span>
                    <span class="iconfont icon-toright"></span>
                </div>
            </div>
        </div>
        <!-- 备注 -->
        <div class="remark-section">
            <div class="remark">选填<span class="tip">(信息采集用于购买商品)</span></div>
        </div>
        <div class="info-section input-info-section">
            <!-- 姓名 -->
            <div class="cell shadow">
                <div class="left">
                    <span class='iconfont icon-nicheng'></span>
                    <span class="cell-name">姓名</span>
                </div>
                <div class="right">
                    <input class="realname-text" @textInput="textInutCheck('realname',$event)" ref="realnameText" type="text" v-model="realnameValue" :placeholder="realnamePH" >
                </div>
            </div>
            <!-- 生日 -->
            <div class="cell shadow" @click="openBirthdayPicker">
                <div class="left">
                    <span class='iconfont icon-shengri'></span>
                    <span class="cell-name">生日</span>
                </div>
                <div class="right">
                    <span class="wx-value">{{birthdayValue}}</span>
                    <span class="iconfont icon-toright"></span>
                </div>
            </div>
            <!-- 绑定手机 -->
            <div class="cell" @click="jumpToBindPhone">
                <div class="left">
                    <span class='iconfont icon-phone'></span>
                    <span class="cell-name">手机号</span>
                </div>
                <div class="right">
                    <span class="wx-value" :class="[{'dark':phonenoDark}]">{{phonenoValue}}</span>
                </div>
            </div>
        </div>
        <!-- 性别选择器 -->
        <mt-popup class="sex-popup" position="bottom" popup-transition="popup-slide" :modal=true v-model="showPopup">
            <div class="popup-content">
                <div class="btns">
                    <span class="btn" @click="cancelSexSelect">取消</span>
                    <span class="btn" @click="sureSexSelect">确定</span>
                </div>
                <mt-picker ref="sexPicker" class="sex-picker" :slots="slots" :itemHeight="32" :visibleItemCount="3"></mt-picker>  
            </div>
        </mt-popup>
        <!-- 生日选择器 -->
        <mt-datetime-picker class="birthday-picker" v-model="pickerValue" :visibleItemCount="5" type="date" ref="birthPicker"
        year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" :startDate='maxdata' :endDate='mindata'></mt-datetime-picker>
        <mt-button class="commit-btn" type="default" @click.native="commitHandle">提交</mt-button>
    </div>
</template>

<script>
import Vue from "vue";
import { mapState } from "vuex";
import { formatDate } from "../../../common/js/date.js";
import { Toast, Button, DatetimePicker, Popup, Picker } from "mint-ui";
import "mint-ui/lib/button/style.css";
import "mint-ui/lib/toast/style.css";
import "mint-ui/lib/datetime-picker/style.css";
import "mint-ui/lib/picker/style.css";
import "mint-ui/lib/popup/style.css";
Vue.component(Button.name, Button);
Vue.component(Toast.name, Toast);
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.component(Picker.name, Picker);
import $ from "jquery";

export default {
  name: "info",
  data() {
    return {
      realnameValue: "",
      birthdayValue: "",
      sexValue: "",
      pickerValue: "",
      maxdata: new Date("1937-01-01"),
      mindata: new Date("2017-12-30"),
      requesting: false,
      hasMoveEvent: false,
      showPopup: false,
      slots: [
        {
          flex: "0 0 100%",
          values: ["女", "男"],
          className: "slot1",
          defaultIndex: 0
        }
      ]
    };
  },
  components: {},
  beforeRouteLeave(to, from, next) {
    this.removePreventDefault();
    next();
  },
  methods: {
    textInutCheck(type, event) {
      if (type == "realname") {
        if (!this.realnameValue && event.data == " ") event.returnValue = false;
        if (this.realnameValue.length >= 15) event.returnValue = false;
      }
    },
    handleConfirm(data) {
      let parsedDate = formatDate(data, "yyyy-MM-dd");
      this.birthdayValue = parsedDate;
    },
    addPreventDefault() {
      let birthPicker = document.querySelector(".mint-datetime-picker");
      let sexPicker = document.querySelector(".sex-popup");
      if (!birthPicker || !sexPicker || this.hasMoveEvent) return;
      this.hasMoveEvent = true;
      birthPicker.addEventListener("touchmove", this.preventMoveHandle, false);
      sexPicker.addEventListener("touchmove", this.preventMoveHandle, false);
    },
    removePreventDefault() {
      let birthPicker = document.querySelector(".mint-datetime-picker");
      let sexPicker = document.querySelector(".sex-popup");
      if (!birthPicker || !sexPicker || !this.hasMoveEvent) return;
      birthPicker.removeEventListener("touchmove", this.preventMoveHandle);
      sexPicker.removeEventListener("touchmove", this.preventMoveHandle);
    },
    preventMoveHandle(event) {
      event.preventDefault(); //阻止默认行为
      event.stopPropagation(); //阻止冒泡
    },
    openBirthdayPicker() {
      this.$refs.birthPicker.open();
      this.addPreventDefault();
    },
    openSexPicker() {
      this.showPopup = true;
      this.addPreventDefault();
    },
    cancelSexSelect() {
      this.showPopup = false;
    },
    sureSexSelect() {
      this.showPopup = false;
      this.sexValue = this.$refs.sexPicker.getSlotValue(0);
    },
    commitHandle() {
      if (this.requesting) return;
      this.requesting = true;
      let timeStapm = parseInt(Date.parse(this.birthdayValue) / 1000);
      this.$http
        .post(this.path + "store/Store/updatestore", {
          userid: this.userid,
          username: this.username,
          phone: this.phoneno,
          sex: this.sexValue == "女" ? "0" : "1",
          fullname: this.realnameValue,
          birthday: timeStapm
        })
        .then(response => {
          this.requesting = false;
          let serverData = response.body;
          if (serverData.status.toString() != "ok") {
            this.showMsg("保存失败");
            return;
          }
          this.$store.commit("UPDATE_REALNAME", this.realnameValue);
          this.$store.commit("UPDATE_BIRTHDAY", this.birthdayValue);
          this.$store.commit("UPDATE_SEX", this.sexValue);
          this.showMsg("已保存");
        })
        .catch(response => {
          this.requesting = false;
          console.log(response);
        });
    },
    jumpToBindPhone() {
      this.$router.push({ path: "/bindPhone" });
    },
    showMsg: function(msg) {
      Toast({
        message: msg,
        iconClass: "iconfont icon-tishi1",
        duration: 1000
      });
    }
  },
  mounted() {
    this.realnameValue = this.realname;
    this.birthdayValue = this.birthday;
    this.pickerValue = this.birthdayValue;
    this.sexValue = this.sex;
    this.$refs.sexPicker.setSlotValue(0, this.sexValue);
  },
  computed: {
    ...mapState([
      "openid",
      "path",
      "userid",
      "icon",
      "username",
      "phoneno",
      "sex",
      "realname",
      "birthday"
    ]),
    realnamePH() {
      if (this.realnameValue) return "";
      else return "请输入";
    },
    phonenoValue() {
      if (this.phoneno) return this.phoneno;
      else return "请绑定手机";
    },
    phonenoDark() {
      if (this.phoneno) return false;
      else return true;
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.info-container {
    height: 100%;
    position: relative;
    background-color: #efefef;

    .head-section {
        height: 1.12rem;
        display: flex;
        align-items: center;
        justify-content: center;

        .head-img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            border: 1px #fad9e0 solid;
        }
    }

    .info-section {
        background-color: #fff;
        padding: 0 0.14rem;
        box-sizing: border-box;
    }

    .cell {
        padding-top: 0.02rem;
        height: 0.38rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        &.shadow {
            box-shadow: 0 1px 0 rgba(57, 58, 78, 0.1);
        }

        .left {
            margin-left: 0.02rem;
            height: 100%;
            display: flex;
            align-items: center;

            .iconfont {
                font-size: 0.18rem;
                color: #e61874;
                position: relative;
                top: -0.02rem;

                &.icon-phone {
                    font-size: 0.17rem;
                }
            }

            .cell-name {
                margin-left: 0.06rem;
                font-size: 0.12rem;
                color: #383d43;
                letter-spacing: 0.01rem;
            }
        }

        .right {
            height: 100%;
            display: flex;
            align-items: center;
            margin-right: 0.02rem;

            input {
                // width: 100%;
                text-align: right;
                -webkit-appearance: none; // 去掉iphone背景阴影
                border: none;
                outline: none;
                box-sizing: border-box;
                -webkit-touch-callout: none;
                color: #383d43;
                font-size: 0.12rem;
                letter-spacing: 0.01rem;
                line-height: 0.28rem;

                &::-webkit-input-placeholder {
                    color: #999;
                    font-size: 0.12rem;
                    letter-spacing: 0.01rem;
                }
            }

            .wx-value {
                color: #383d43;
                font-size: 0.12rem;

                &.dark {
                    color: #999;
                }
            }

            .icon-toright {
                color: #999;
                font-weight: 700;
                font-size: 0.12rem;
            }
        }
    }

    .remark-section {
        height: 0.34rem;
        display: flex;
        align-items: center;

        .remark {
            border-left: 3px #e61874 solid;
            line-height: 0.18rem;
            color: #383d43;
            font-size: 0.13rem;
            padding-left: 0.06rem;
            margin-top: 0.08rem;
            letter-spacing: 0.01rem;

            .tip {
                font-size: 0.12rem;
                color: #999;
                letter-spacing: 0;
            }
        }
    }

    .sex-popup {
        width: 100%;

        .popup-content {
            padding-top: 2px;

            .btns {
                height: 32px;
                display: flex;
                font-size: 14px;
                color: #e61874;
                text-align: center;
                border-bottom: solid 1px #eaeaea;

                .btn {
                    flex: 1;
                    line-height: 32px;
                }
            }

            .sex-picker {
                margin: 0.06rem 0.4rem 0.1rem 0.4rem;
                box-sizing: border-box;

                .picker-item {
                    font-size: 15px;
                    color: #acacac;

                    &.picker-selected {
                        color: #e61874;
                    }
                }
            }
        }
    }

    .birthday-picker {
        .picker-toolbar {
            height: 32px;
            padding-top: 2px;

            .mint-datetime-action {
                display: inline-block;
                width: 50%;
                text-align: center;
                line-height: 32px;
                font-size: 14px;
                color: #e61874;
            }
        }

        .picker-items {
            margin: 0.1rem 0.3rem;
            box-sizing: border-box;

            .picker-item {
                font-size: 14px;
                color: #acacac;

                &.picker-selected {
                    color: #e61874;
                }
            }
        }
    }

    .commit-btn {
        position: absolute;
        bottom: 0.24rem;
        left: 0.2rem;
        background-color: #b37287;
        color: #fff;
        font-size: 0.13rem;
        letter-spacing: 0.04rem;
        height: 0.32rem;
        box-shadow: none;
        width: 2.8rem;
    }
}
</style>
